<template>
  <div style="min-height: 350px">
    <a-form ref="userForm" :model="entity" :rules="rules" label-width="120px">
      <a-form-item label="用户名" field="username">
        <a-input v-model="entity.username" ref="username" placeholder="用户名" />
      </a-form-item>
      <a-form-item label="密码" field="pwd">
        <a-input-password v-model="entity.pwd" placeholder="密码" />
      </a-form-item>
      <a-form-item label="姓名" field="name">
        <a-input v-model="entity.name" placeholder="姓名" />
      </a-form-item>
      <a-form-item label="手机号" field="phone">
        <a-input v-model="entity.phone" placeholder="手机号" />
      </a-form-item>
      <a-form-item label="企业微信" field="wxuid">
        <a-input v-model="entity.wxuid" placeholder="企业微信" />
      </a-form-item>
      <a-form-item>
        <a-space>
          <a-button type="primary" @click="btnSubmit">确 定</a-button>
          <a-button type="primary" @click="onCancel">取 消</a-button>
        </a-space>
      </a-form-item>
    </a-form>
  </div>
</template>

<script lang="ts" setup>
import axios from "axios";
import { Message } from '@arco-design/web-vue'
import mittBus from "@/utils/route-listener"
import {reactive, ref, onMounted, defineProps, defineEmits, nextTick} from "vue";

// 定义变量内容
const userForm = ref(null);
const username = ref(null);

// defineProps(['modelValue'])
const emit = defineEmits(['update:modelValue'])
let props = defineProps({
  modelValue : {type : Boolean, default: true},
  entityId : {type : Number, default: 0},
  orgId : {type : Number, default: 0}
})

let entity = ref({
  username: '',
  pwd : '',
  name: '',
  phone:'',
  wxuid:'',
  orgId : props.orgId
})
const rules = reactive({
  username: [
    { required: true, message: '请输入用户名', trigger: 'blur' },
    { minLength: 2, maxLength: 20, message: '长度在 2 到 20 个字符', trigger: 'blur' }
  ],
  pwd: [
    { required: true, message: '请输入密码', trigger: 'blur' },
    { minLength: 2, maxLength: 20, message: '长度在 2 到 20 个字符', trigger: 'blur' }
  ],
  name: [
    { required: true, message: '请输入姓名', trigger: 'blur' },
    { minLength: 2, maxLength: 20, message: '长度在 2 到 20 个字符', trigger: 'blur' }
  ],
})
const loadEntity = ()=>{
  if(props.entityId > 0){
    axios.post( '/sys/useradmin/getuser',{id : props.entityId}).then( res =>{
      entity.value = res.data
    })
  }
}
const onCancel = ()=>{
  emit('update:modelValue', false) //关闭弹窗
}
const btnSubmit = ()=>{
  if(!userForm.value) return;
  userForm.value.validate().then((errors) =>{
    if(!errors){
      axios.post('/sys/useradmin/addedituser', entity.value).then( (res) =>{
        const {code,msg} = res;
        if(code != '200'){
          Message.error(msg);
        }else{
          Message.success(msg)
          emit('update:modelValue', false) //关闭弹窗
          props.entityId > 0 ? mittBus.emit('useredit', {}) : mittBus.emit('useradd', {});
        }
      })
    }else{
      console.log('error submit!!');
      return false;
    }
  })
}
onMounted(()=>{
  loadEntity()
  nextTick(()=>{
    username.value.focus();
  })
})
</script>

<style scoped>

</style>
